import type { InsertPosition } from '../../../types/constants'
import { AppStyleCollections } from '../../../types/constants'
import { BADGE_STYLES } from '../../../types/constants/styles/badge'
import { ToolKit } from '../../utils/toolkit'

export class PageBadgeHandler {
  private static instance: PageBadgeHandler

  /**
   * 获取单例实例
   */
  public static getInstance(): PageBadgeHandler {
    if (!PageBadgeHandler.instance) {
      PageBadgeHandler.instance = new PageBadgeHandler()
    }
    return PageBadgeHandler.instance
  }

  /**
   * 获取或创建徽章容器
   */
  getOrCreateBadgeContainer(
    $element: JQuery,
    options?: {
      insertPosition?: InsertPosition
      elementStyle?: string
      containerStyle?: string
    },
  ): JQuery {
    const { insertPosition, elementStyle, containerStyle } = options || {}
    let $container = $element.find(`.${AppStyleCollections.Badge.CONTAINER}`)

    if (!$container.length) {
      $container = $(`
        <div class="${AppStyleCollections.Badge.CONTAINER}" style="${containerStyle || ''}">
        </div>`)
      ToolKit.dom.insertElement($element, $container, insertPosition)
    }

    ToolKit.dom.addStyle($element, elementStyle || '')

    return $container
  }

  /**
   * 通过参数创建并添加徽章
   * @param $element 目标元素
   * @param id 徽章唯一标识（用于生成class）
   * @param content 徽章文本内容
   * @param options 徽章选项
   * @param options.backgroundColor 背景样式（默认绿色渐变）
   * @param options.insertPosition 插入位置
   * @param options.elementStyle 元素样式
   * @param options.containerStyle 容器样式
   * @param options.badgeStyle 徽章样式
   */
  addBadge(
    $element: JQuery,
    id: string,
    content: string,
    options?: {
      backgroundColor?: string
      insertPosition?: InsertPosition
      elementStyle?: string
      containerStyle?: string
      badgeStyle?: string
    },
  ): JQuery {
    const { backgroundColor, insertPosition, elementStyle, containerStyle, badgeStyle } = options || {}
    const $container = this.getOrCreateBadgeContainer($element, { insertPosition, elementStyle, containerStyle })
    const background = backgroundColor || BADGE_STYLES.success

    const $badge = $(`
      <div class="${id}-badge ${AppStyleCollections.Badge.PROMINENT}" style="background: ${background} !important; ${badgeStyle || ''}">
        <span class="${AppStyleCollections.Badge.LABEL}" style="color: white !important;background: ${background} !important;">
          ${content}
        </span>
      </div>
    `)

    $container.append($badge)

    return $badge
  }

  /**
   * 添加已存在的徽章元素
   * @param $element 目标元素
   * @param $badge 预构建的徽章元素
   * @param insertPosition 插入位置
   */
  attachBadge($element: JQuery, $badge: JQuery, insertPosition?: InsertPosition): void {
    const $container = this.getOrCreateBadgeContainer($element, { insertPosition })
    $container.append($badge)
  }

  /**
   * 移除徽章
   * @param selector 徽章选择器
   */
  removeBadge(selector: string): void {
    $(selector).find(`.${AppStyleCollections.Badge.CONTAINER}`).remove()
  }
}
